<template>
  <div class="video-playlist">
    <div class="playlist-items">
      <div class="playlist-item" v-for="(item, index) in playlist" :key="index">
        <div class="thumbnail">
          <img
            :src="item.img_url ? item.img_url : defaultImg"
            alt="Video Thumbnail"
          />
          <div class="thumbnail-overlay" @click="GoVideoDetail(item)">
            <img src="@/assets/img/svg/play-icon.svg" alt="Play Icon" />
          </div>
        </div>
        <div class="details">
          <el-link
            @click="GoVideoDetail(item)"
            :underline="false"
            class="video-title"
            >{{ item.video_title }}</el-link
          >

          <div class="detail-content">
            <el-link
              @click="GoAuthorPage(item)"
              :underline="false"
              class="authorName"
            >
              <img src="@/assets/img/svg/author.svg" alt="" />
              {{ item.creator_name }}
            </el-link>

            <p class="info">
              <img src="@/assets/img/svg/play-num.svg" alt="" />

              {{ item.view_count }} 播放 · {{ item.date }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defaultImg from '@/assets/img/defaultImg.jpg'
export default {
  data() {
    return {
      playlist: [],
      defaultImg: defaultImg
    }
  },
  methods: {
    // 跳转到推荐视频页面
    GoVideoDetail(video) {
      this.$router.push('/videoDetail/' + video.id)
      window.location.reload()
    },
    GoAuthorPage(video) {
      this.$router.push('/homePage/' + video.creator_id)
    }
  },
  props: {
    videoList: {
      type: Array,
      required: true
    },
    count: {
      type: Number,
      required: true
    }
  },
  watch: {
    videoList: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) this.playlist = val
      }
    }
  }
}
</script>

<style scoped>
.video-playlist {
  margin-top: 20px;
}

.playlist-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.playlist-item {
  display: flex;
  margin-bottom: 16px;
  cursor: pointer;
}

.thumbnail {
  position: relative;
  width: 120px;
  height: 90px;
  margin-right: 10px;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.thumbnail-overlay img {
  width: 40px;
  height: 40px;
}

.thumbnail:hover .thumbnail-overlay {
  opacity: 1;
}

.details {
  /* flex: 1; */
}
.authorName {
  color: #6f7274;
}
.detail-content {
  line-height: 20px;
}
.video-title {
  font-size: 14px;
  color: #1c1f23;
  margin-bottom: 5px;
}

.info {
  font-size: 12px;
  color: #999;
}
</style>
